<template>
  <view class="warp">
    <view class="neir">
      <textarea
        placeholder="请填写您的祝福语..."
        name=""
        id=""
        show-confirm-bar="true"
        v-model="value"
      ></textarea>
      <view class="zhufu"><text @click="xuanzhe">选择祝福语</text></view>
    </view>

    <view class="item bx" @click="insertMusic">
      <view>插入音乐</view>
      <view style="color: #F48FB1; font-size: 40rpx">></view>
    </view>

    <view class="item">
      <view>塞个红包</view>
      <view>
        <switch color="#F48FB1" :checked="false" @change="switch1Change" />
      </view>
    </view>

    <view class="caozuo">
      <button @click="yulan">预览</button>
      <button @click="tianjia">生成祝福</button>
    </view>

    <!-- 预览 -->
    <view class="yulan" :style="isYulan">
      <view class="yulan_neir">
        <image :src="hekaBj"></image>
        <text>{{ value }}</text>
      </view>
      <button @click="queding">确认</button>
    </view>

    <!-- 祝福语 -->
    <scroll-view
      v-show="zhufuyu"
      scroll-y="true"
      class="scroll-Y"
      show-scrollbar="true"
      :scroll-top="scrollTop"
      @scrolltoupper="upper"
      @scrolltolower="lower"
      @scroll="scroll"
    >
      <view v-for="item in arr" :key="item.id">
        <view id="demo1" class="scroll-view-item" @click="xzZhuFuYu(item.msg)"
          >{{ item.id }}、{{ item.msg }}</view
        >
      </view>
    </scroll-view>

    <!-- 插入音乐 -->
    <view class="uni-list" v-if="musicIsShow">
      <radio-group @change="radioChange">
        <label
          class="uni-list-cell uni-list-cell-pd"
          v-for="item in items"
          :key="item.id"
        >
          <view class="datalist">
            <radio :value="item.id" />
            <text>{{ item.value }}</text>
          </view>
        </label>
      </radio-group>
      <button @click="musicXz">确定</button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      src: "",
      value: "",
      hekaBj: "",
      isYulan: "display:none",
      zhufuyu: false,

      scrollTop: 0,
      old: {
        scrollTop: 0,
      },
      //祝福语
      arr: [
        {
          id: 1,
          msg:
            "生活，在喜怒哀乐间走走停停。不知道会遇见什么，只知道阳光这么好，别辜负了今天。 ",
        },
        {
          id: 2,
          msg:
            "我没有五彩的鲜花，没有浪漫的诗句，没有贵重的礼物，没有特殊的惊喜，只有轻轻的祝福，每天好心情。",
        },
        {
          id: 3,
          msg:
            "托白云送去我绵绵不尽的思念，托清风送去我轻轻的祝福。祝您生日快乐！",
        },
        { id: 4, msg: "生" },
        { id: 5, msg: "日" },
        { id: 6, msg: "快" },
        { id: 7, msg: "乐" },
        { id: 8, msg: "开" },
        { id: 9, msg: "兴" },
        { id: 10, msg: "每" },
        { id: 11, msg: "一" },
        { id: 12, msg: "天" },
        { id: 13, msg: "愿你阳光下像个孩子，风雨里像个大人" },
      ],

      //音乐
      musicIsShow: false,
      items: [
        { id: 0, value: "无", musicSrc: "0" },
        { id: 1, value: "Happy birthday", musicSrc: "5456" },
        { id: 2, value: "Happy New Year", musicSrc: "79887" },
      ],
      current: 0,
      musicSrcData: "",
    };
  },

  onLoad(e) {
    console.log(e);
    this.hekaBj = e.imgSrc;
  },
  methods: {
    switch1Change: function (e) {
      console.log("switch1 发生 change 事件，携带值为", e.target.value);
      if (e.target.value) {
        wx.showModal({
          title: "发红包",
          content: "要发红包吗？",
          success(res) {
            if (res.confirm) {
              wx.showToast({
                title: "发红包",
                icon: "success",
                duration: 2000,
              });
            } else if (res.cancel) {
              wx.showToast({
                title: "不发了",
                icon: "none",
                duration: 2000,
              });
            }
          },
        });
      } else {
        wx.showToast({
          title: "没钱不发了",
          icon: "none",
          duration: 2000,
        });
      }
    },
    tijiao() {
      console.log(132);
    },
    xuanzhe() {
      this.zhufuyu = true;
    },

    xzZhuFuYu(val) {
      console.log(val);
      this.zhufuyu = false;
      this.value = val;
    },
    upper: function (e) {
      // console.log(e);
    },
    lower: function (e) {
      // console.log(e);
    },
    scroll: function (e) {
      // console.log(e);
      this.old.scrollTop = e.detail.scrollTop;
    },

    yulan() {
      console.log(this.value);
      console.log(this.hekaBj);
      this.isYulan = "display:block";
    },
    queding() {
      this.isYulan = "display:none";
    },
    //音乐
    insertMusic() {
      this.musicIsShow = true;
    },
    radioChange: function (evt) {
      console.log(evt);
      console.log(evt.target.value);
      this.items.map((item) => {
        if (item.id == evt.target.value) {
          return (this.musicSrcData = item);
        }
      });
    },
    musicXz() {
      console.log(this.musicSrcData);
      this.musicIsShow = false;
    },

    tianjia() {
      wx.showToast({
        title: "成功",
        icon: "success",
        duration: 2000,
      });

      setTimeout(() => {
        wx.switchTab({
          url: "/pages/heka/heka",
        });
      },1000);
    },
  },
};
</script>

<style>
.warp {
  position: relative;
}
scroll-view {
  position: absolute;
  top: 0;
  z-index: 4;
  width: 100%;
  height: 1100rpx;
  /* border: 1px solid red; */
  background: white;
}
.scroll-view-item {
  width: 96%;
  padding: 2%;
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  /* background-color: pink; */
  border-bottom: 2rpx solid #dad8d8;
}
.neir {
  /* border: 1px solid red; */
  position: relative;
}
textarea {
  width: 626rpx;
  height: 340rpx;
  margin: 30rpx;
  padding: 30rpx;
  background: #FFFFFF;
  border: 2rpx solid #F48FB1;
  border-radius: 20rpx;
  font-family: PingFang SC;
}
.zhufu {
  position: absolute;
  z-index: 2;
  left: 45rpx;
  bottom: 20rpx;
  width: 160rpx;
  height: 60rpx;
  line-height: 50rpx;
  background: #F48FB1;
  border-radius: 30rpx;
  text-align: center;
}
.zhufu > text {
  font-size: 24rpx;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
.item {
  width: 90%;
  display: flex;
  justify-content: space-between;
  padding: 5%;
}
.bx {
  border-top: 20rpx solid #F4F4F4;
  border-bottom: 20rpx solid #F4F4F4;
}
.item switch {
  width: 80rpx;
  height: 20rpx;
}
.caozuo {
  width: 100%;
  margin-top: 60px;
}
button {
  width: 400rpx;
  height: 88rpx;
  font-size: 32rpx;
  font-family: PingFang SC;
  font-weight: 500;
  margin-top: 40rpx;
}
.caozuo > button:nth-of-type(1) {
  border: 2rpx solid #F48FB1;
  border-radius: 44rpx;

  color: #F48FB1;
}
.caozuo > button:nth-of-type(2) {
  background: #F48FB1;
  border-radius: 44rpx;

  color: #FFFFFF;
}
.yulan {
  width: 90%;
  height: 88%;
  background-color: white;
  position: absolute;
  top: -5%;
  padding: 20% 5%;
  z-index: 2;
  transition: 1s linear all;
}
.yulan_neir {
  width: 100%;
  height: 50%;
  background-color: white;
  border: 1px solid gray;
  position: relative;
}
.yulan_neir image {
  width: 100%;
  height: 100%;
  position: absolute;
}
.yulan_neir > text {
  /* border: 1px solid red; */
  width: 80%;
  margin: 10%;
  text-decoration: underline;
  position: absolute;
}

.uni-list {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  background-color: white;
}
.datalist {
  /* border: 1px solid red; */
  width: 92%;
  padding: 4%;
}
</style>
